<!--
 * @Author: 邱智聪
 * @Date: 2020-06-28 18:21:47
 * @LastEditTime: 2020-07-01 16:59:50
 * @LastEditors: Please set LastEditors
 * @Description: 填写退货物流
 * @FilePath: \ShopProject\JKshop\jkshop\src\pages\return\returnLogistics.vue
--> 
<template>
  <div class="returnLogistics">
    <van-nav-bar title="填写退货物流" left-text="返回" left-arrow @click-left="goBack" />
    <!-- 通知内容 -->
    <div class="notice">
      <van-icon name="info-o" style="margin-right:10px" />钱款将在商城收到货，确认无误后的72小时内原路返还
    </div>
    <!-- 运单号 -->
    <van-field v-model="num" label="运单号码" placeholder="请输入完整快单递号" />
    <!-- 物流选择 -->
    <van-cell is-link @click="showPopup" style="color:blue">
      物流公司:
      <template #right-icon>
        <div>
          {{wuliu_defalut}}
          <van-icon name="arrow" />
        </div>
      </template>
    </van-cell>
<!-- 物流公司列表 -->
    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="right"
      :style="{ height: '100%',width:'50%' }"
    >
      <ul class="wuliu">
        <li v-for="item of wuliu" :key="item.id">
          <p @click="getWuliu(item.name)">{{item.name}}</p>
        </li>
      </ul>
    </van-popup>

    <van-button class="next" type="danger" to="returned">提交</van-button>
  </div>
</template>

<script>
import * as api from "@/api/apiList/service/service.js";
export default {
  data() {
    return {
      num: "", // 运单号
      show: false, //弹出层
      wuliu:[],//物流公司
      wuliu_defalut: "顺丰速运" //默认物流
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    showPopup() {
      //弹出层
      this.show = true;
    },
    getWuliu(name) {
      //物流公司选中
      this.wuliu_defalut =name;
      this.show = false;
    },
    async API_express(){
        return await api.express();  
    }
  },
  async created() {
      let res = await this.API_express();  

    if (res.data.code === 200) {
      this.wuliu = res.data.data;
    }
    console.log(this.wuliu)
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/return/wuliu";
</style>